<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8" />
	    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
	    <meta content="yes" name="apple-mobile-web-app-capable" />
	    <meta content="yes" name="apple-touch-fullscreen" />
	    <meta content="telephone=no,email=no" name="format-detection" />
	    <meta content="maximum-dpr=2" name="flexible" />
	    <meta content="modeName=750-12" name="grid" />
		<title>选择 </title>

		<script src="static/build/flexible.js"></script>
	    <link href="static/css/style.css" rel="stylesheet" />
	    <script src="static/js/jquery.min.js"></script>
	    <script src="static/js/awardRotate.js"></script>
	</head>
	<body>
		<div class="TurntablePage" style="padding-top: 50px;">
			<div class="TurntableBox">
				<div class="title allTitle">点击指针进行选择</div>
				<div class="turnplate">
					<canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
					<img class="pointer" src="static/images/start.png"/>
				</div>
			</div>


		</div>
	</body>
</html>
<script type="text/javascript">
		//页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
		var turnplate={
				restaraunts:[],				//大转盘奖品名称
				colors:[],					//大转盘奖品区块对应背景颜色
				outsideRadius:200,			//大转盘外圆的半径
				textRadius:150,				//大转盘奖品位置距离圆心的距离
				insideRadius:20,			//大转盘内圆的半径
				startAngle:0,				//开始角度
				bRotate:false				//false:停止;ture:旋转
		};
		//动态添加大转盘的奖品与奖品区域背景颜色
		turnplate.restaraunts = ["平娃", "麦当劳", "老家肉饼",'食堂','吉野家','盒马鲜生','山西刀削面','河南烩面','福香满园','驴肉火烧','杭州小吃','新疆拉面','马华','黄焖鸡米饭','菜米油盐','正一味','呷哺','减肥不吃啦'];
		colorsArr = ["#FFF4D6", "#FFFFFF",'#fff0c8'];
		returnColor();
		function returnColor(){
			var a=turnplate.restaraunts.length;
			var color=turnplate.restaraunts.map(function(item,index,array){
					if(a%2){
						return (index+1)==a? colorsArr[2]:colorsArr[index%2]
					}else{
						return colorsArr[index%2];
					}
				})			
			turnplate.colors=color;
		}

		window.onload=function(){
			drawRouletteWheel();
		};


		$('.pointer').click(function (){
			if(turnplate.bRotate)return;
			turnplate.bRotate = !turnplate.bRotate;
			//获取随机数(奖品个数范围内)
			var item = rnd(1,turnplate.restaraunts.length);
			//奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
			rotateFn(item, turnplate.restaraunts[item-1]);
			console.log(item);
		});
		function rnd(n, m){
			var random = Math.floor(Math.random()*(m-n+1)+n);
			return random;
		}
		//旋转转盘 item:奖品位置; txt：提示语;
		var rotateFn = function (item, txt){
			var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2));
			if(angles<270){
				angles = 270 - angles; 
			}else{
				angles = 360 - angles + 270;
			}
			$('#wheelcanvas').stopRotate();
			$('#wheelcanvas').rotate({
				angle:0,
				animateTo:angles+1800,
				duration:12000,
				callback:function (){
					console.log(txt);
					turnplate.bRotate = !turnplate.bRotate;
				}
			});
		};
	function drawRouletteWheel() {    
	  var canvas = document.getElementById("wheelcanvas");    
	  if (canvas.getContext) {
		  //根据奖品个数计算圆周角度
		  var arc = Math.PI / (turnplate.restaraunts.length/2);
		  var ctx = canvas.getContext("2d");
		  //在给定矩形内清空一个矩形
		  ctx.clearRect(0,0,422,422);
		  //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式  
		  ctx.strokeStyle = "#FFBE04";
		  //font 属性设置或返回画布上文本内容的当前字体属性
		  ctx.font = '16px Microsoft YaHei';      
		  for(var i = 0; i < turnplate.restaraunts.length; i++) {       
			  var angle = turnplate.startAngle + i * arc;
			  ctx.fillStyle = turnplate.colors[i];
			  ctx.beginPath();
			  //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）    
			  ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);    
			  ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
			  ctx.stroke();  
			  ctx.fill();
			  //锁画布(为了保存之前的画布状态)
			  ctx.save();   
			  //----绘制奖品开始----
			  ctx.fillStyle = "#c00";
			  var text = turnplate.restaraunts[i];
			  var line_height = 17;
			  //translate方法重新映射画布上的 (0,0) 位置
			  ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);
			  //rotate方法旋转当前的绘图
			  ctx.rotate(angle + arc / 2 + Math.PI / 2);
			  /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
			  if(text.length>3){//奖品名称长度超过一定范围 
				  text = text.substring(0,2)+"||"+text.substring(2);
				  var texts = text.split("||");
				  for(var j = 0; j<texts.length; j++){
					  ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
				  }
			  }else{
				  //在画布上绘制填色的文本。文本的默认颜色是黑色
				  //measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
				  ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
			  }
			  ctx.restore();
			  //----绘制奖品结束----
		  }     
	  } 
	}
	
	</script>
